<template>
    <div class="container" id="pie">

    </div>
</template>

<script>
module.exports = {

    mounted() {
        this.loadPie();
    },
    methods: {
        loadPie() {
            var mychart = echarts.init(document.getElementById("pie"));
            var option;
            option = {
                title: {
                    text: '饼图',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            mychart.setOption(option);
        }
    }

}
</script>

<style scoped>
.container {
    border: 1px solid olive;
    width: 22%;
    height: 27%;
    position: absolute;
    left: 75%;
    top: 70%;
    background-color: whitesmoke;
}
</style>